<template>
	<view class="content">
		<!-- 顶部右侧发布内容结构 -->
		<view class="top">
			<view hover-class="publish" class="pub" @click="publish">
				<uni-icons type="camera-filled" size="40"></uni-icons>
			</view>
			<view class="headimgurl">
				<!-- 当前用户的昵称 -->
				<text class="nickname">{{userStore.userInfo.nickname}}</text>
				<!-- 当前用户的头像 -->
				<view class="img">
					<image :src="userStore.userInfo.headimgurl" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<!-- 社区组件 -->
		<scroll-view style="height:calc(100vh-280px)" scroll-y class="comments">
			<community-com v-for="item in commentData" @handlike="handleLike" :likes="item.likes"
				:imgList="item.imgList" :likeNumber="item.likes.length" :key="item._id" :currentItem="item"
				:avatar="item.headimgurl" :name="item.nickname" :publishTime="item.create_at" :content="item.content"
				@start-write-comment="startWriteComment" :reply="item.reply" @reply="replySomeone"></community-com>
			<view class="loading" style="height:50px;text-align: center;line-height:50px">
				正在加载...
			</view>
		</scroll-view>
		<!-- 回复框 -->
		<view class="comment-box" v-show="showReplyBox">
			<view class="container">
				<input type="text" @blur="handleBlur" :focus="replyBoxFocus" v-model="content" @confirm="handleSend"
					:adjust-position="false" cursor-spacing="25" confirm-type="send" :placeholder="placeholder" />
			</view>
		</view>
	</view>
</template>
<script setup>
	import communityCom from "@/components/community.vue"
	import { getCommentApi, addCommentApi, likeCommentApi } from "@/api/comment.js"
	import { ref, onMounted } from "vue"
	import { onShow, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app"
	import useUser from "@/store/users.js"

	//标识是否下拉
	let isPullDown = false

	//下拉刷新

	onPullDownRefresh(async () => {
		// console.log('下拉了---')
		isPullDown = true;
		await getCommentList()
		uni.stopPullDownRefresh()
		isPullDown = false;
	})
	//上拉页码
	let page = 1;
	//上拉一次加载的数量
	let count = 5
	//上拉加载
	onReachBottom(async () => {
		// console.log('上拉了---')
		page++
		//用分页的思路
		try {
			let res = await getCommentApi({ page, count })
			console.log('--上拉', res)
			commentData.value = [...commentData.value, ...res.data]
		} catch (e) {
			console.log(e.toString())
		}
	})
	//从store中获取userInfo

	let userStore = useUser();

	//用于存储评论数据的变量
	let commentData = ref([])

	//声明一个数据控制回复框的显示和隐藏
	let showReplyBox = ref(false)
	//控制replyBox获得焦点的属性
	let replyBoxFocus = ref(false)
	//回复输入框的placeHolder
	let placeholder = ref('评论')
	//声明一个数据,存储当前这条帖子(朋友圈)图文数据对象
	let currentItem = {};
	//回复的内容
	let content = ref("")
	//声明一个标识,用于表示现在在回复某个人,而不是回复某条图文信息
	let isReplySomeone = false;
	//声明方法,获取评论
	let getCommentList = async () => {
		//打开加载动画
		!isPullDown && uni.showToast({
			title: "正在获取",
			icon: "loading"
		})
		try {
			let res = await getCommentApi();
			// console.log('---comment',res)
			commentData.value = res.data;
			//关闭加载动画
			uni.hideToast()
			//预留逻辑,以后可能会异步调用comment
			return Promise.resolve(res.data)
		} catch (e) {
			console.log(e)
		}
	}
	let currentCommentId = "" //当前数据的id
	//更新列表的方法
	let updateList = async () => {
		uni.showToast({
			title: "正在提交",
			icon: 'loading'
		})
		let res = await getCommentApi({ commentid: currentCommentId });
		console.log('currentRes----', res);
		let current = res.data.length ? res.data[0] : {}
		//通过服务器返回的数据的commentid到coomentData这个数组中进行查找,找到之后替换掉这条数据就行了
		let targetIndex = commentData.value.findIndex(item => item.commentid === current.commentid);
		console.log('索引---', targetIndex)
		//用splice方法,将commentData中的变化的数据,替换成服务器返回的数据
		commentData.value.splice(targetIndex, 1, current)
		uni.hideToast()
	}
	//点赞
	let handleLike = async commentid => {
		console.log('handleLike')
		currentCommentId = commentid;
		// commmentid是用户发布的朋友圈内容数据id
		try {
			uni.showToast({
				title: "",
				icon: "loading"
			})
			let res = await likeCommentApi({ unid: userStore.userInfo.unid, commentid });
			console.log('like------', res)
			uni.hideToast()
			// getCommentList()
			console.log('当前数据.id--', commentid)
			updateList()
		} catch {
			console.log(err)
		}
	}
	//回复某个人
	let replySomeone = (replyItem) => {

		isReplySomeone = true;
		startWriteComment(replyItem)
	}
	//编写回复逻辑
	let startWriteComment = async (current) => {
		//修改placeholder的文字
		placeholder.value = current.replyNickname ? "回复@" + current.replyNickname : '评论'
		currentItem = current
		// console.log('currentitem---', current)
		//显示回复的输入框
		showReplyBox.value = true;
		//回复输入框获取焦点,目的为了让手机上的键盘弹起
		//项目中遇到的难题,获取不到焦点,键盘不弹起
		setTimeout(() => {
			replyBoxFocus.value = true;
		}, 50)
	}

	//添加评论

	let addComment = async () => {
		//回复的朋友圈主题id
		let commentid = isReplySomeone ? currentItem.topicId : currentItem.commentid
		// console.log('---commentid', commentid)
		currentCommentId = commentid;
		uni.showToast({
			icon: "loading"
		})
		// 需要传递参数
		try {
			let params = {
				reply_unid: userStore.userInfo.unid, //自己
				content: content.value, //回复的内容
				commentid, //回复的人的话题id
				target_unid: currentItem.unid //回复的人的id
			};
			let res = await addCommentApi(params)
			console.log('-----ccc', res)
			uni.hideToast();
			//更新列表
			// getCommentList()
			updateList()
			console.log('当前数据.id--', commentid)
			placeholder.value = ""
			content.value = ""
		} catch (e) {
			console.log('---aaa', e)
		}
	}

	//在回复输入框输入完成触发的事件

	let handleSend = () => {
		//隐藏回复输入框
		showReplyBox.value = false;
		//让回复输入框失去焦点
		replyBoxFocus.value = false;
		//发送评论
		addComment()
	}

	//输入框失去焦点
	let handleBlur = () => {
		//隐藏回复输入框
		showReplyBox.value = false;
		//让回复输入框失去焦点
		replyBoxFocus.value = false;
	}

	//发布朋友圈
	let publish = () => {
		uni.navigateTo({
			url: "/pages/publish/publish"
		})
	}

	onShow(() => {
		// getCommentList()
	})
	onMounted(() => {
		getCommentList()
	})
</script>
<style scoped lang="scss">
	.top {
		height: 250px;
		background-color: #ccc;
		position: relative;
		margin-bottom: 30px;

		.publish {
			background-color: #535353;

		}

		.pub {
			width: 80rpx;

			position: absolute;
			right: 3%
		}

		.headimgurl {
			width: 750rpx;
			height: 100px;
			position: absolute;
			right: 3%;
			bottom: -10%;
			// border: 1px solid red;
			display: flex;
			text-align: right;
			justify-content: space-between;

			.img,
			image {
				background-color: #fff;
				width: 200rpx;
				height: 100px;

			}

			.nickname {
				height: 30px;
				top: 20%;
				font-weight: bold;
				font-size: 24px;
				float: right;
				color: #fff;
				text-align: right;
				padding-right: 20rpx;
				background: none;
				margin-top: 20px;
				flex: 1;
				// color:#576b95;
				// position: absolute;
				// right: 30px;
			}
		}
	}


	.comments {
		width: 750rpx;
		box-sizing: border-box;
		padding: 0 60rpx 0 60rpx;
	}

	.comment-box {
		width: 750rpx;
		height: 45px;
		border: 1px solid #ccc;
		background-color: #bbb;
		position: fixed;
		bottom: var(--window-bottom);
		background: #fff;

		.container {
			justify-content: space-between;
			display: flex;
			align-items: center;

			input {
				flex: 1
			}

			// button {
			// 	flex: 2
			// }
		}

	}
</style>